/**
 * @description  收益性表现（收益率明细）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, TableC } from '../../../comps';
import style from './index.less';

class ShowTable extends PureComponent {
  constructor() {
    super();
    this.state = {
      sortedInfo: {},
      sortedInfo2: {},
      dataSource: [],
    };
  }
  componentDidMount() {
    const {
      dispatch,
      args,
      TransactionMonitoringM: { areaName },
    } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/getTableDate',
      payload: args,
      callback: (res) => {
        const data = res.dataSource;
        dispatch({
          type: 'TransactionMonitoringM/actionAreaData',
          payload: {
            data: data,
            areaName: '江苏',
          },
        });
      },
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const {
      TransactionMonitoringM: { areaName },
      dispatch,
      args,
      timeStamp,
    } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      dispatch({
        type: 'TransactionMonitoringM/save',
        payload: {
          dataSource: null,
          areaName: '江苏',
        },
      });
      dispatch({
        type: 'TransactionMonitoringM/getTableDate',
        payload: args,
        callback: (res) => {
          const data = res.dataSource;
          dispatch({
            type: 'TransactionMonitoringM/actionAreaData',
            payload: {
              data: data,
              areaName: areaName,
            },
          });
        },
      });
    }
    if (areaName !== this.props.TransactionMonitoringM.areaName) {
      const {
        TransactionMonitoringM: { tableData },
        dispatch,
      } = this.props;
      const data = tableData.dataSource;
      dispatch({
        type: 'TransactionMonitoringM/actionAreaData',
        payload: {
          data: data,
          areaName: areaName,
        },
      });
    }
  }

  // 根据地区获取数据
  getData = (areaName, data) => {
    if (areaName !== null && areaName !== undefined && data && data.length) {
      data.map((item) => {
        if (item.name == areaName) {
          this.setState({
            dataSource: item.datas,
          });
        }
      });
    }
  };

  // 表格排序
  handleChange = (pagination, filters, sorter) => {
    this.setState({
      sortedInfo: sorter,
    });
  };
  // 表格排序
  handleChange2 = (pagination, filters, sorter) => {
    this.setState({
      sortedInfo2: sorter,
    });
  };

  showTableAll = () => {
    const {
      TransactionMonitoringM: { tableData, areaName },
      loading,
    } = this.props;
    const { sortedInfo } = this.state;
    const columns = [
      { title: '区域', dataIndex: 'name', key: 'name' },
      {
        title: '累计机构数量',
        key: 'totalOrgan',
        dataIndex: 'totalOrgan',
        align: 'right',
        sorter: (a, b) => a.totalOrgan - b.totalOrgan,
        sortOrder: sortedInfo.columnKey === 'totalOrgan' && sortedInfo.order,
      },
      {
        title: '累计产品数量',
        key: 'totalProduct',
        dataIndex: 'totalProduct',
        align: 'right',
        sorter: (a, b) => a.totalProduct - b.totalProduct,
        sortOrder: sortedInfo.columnKey === 'totalProduct' && sortedInfo.order,
      },
    ];

    return (
      <div>
        <TableC
          columns={columns}
          dataSource={tableData.dataSource}
          onChange={this.handleChange}
          rowClassName={(record, index) => {
            return record.name == areaName ? 'selectedRow' : '';
          }}
          rowKey='area'
          hidePage={true}
          loading={loading}
        />
      </div>
    );
  };

  showTable = () => {
    const {
      loading,
      TransactionMonitoringM: { AreaData },
    } = this.props;
    const { sortedInfo2 } = this.state;
    const columns = [
      { title: '机构', key: 'comName' },
      {
        title: '机构的产品规模',
        key: 'productSum',
        align: 'right',
        sorter: (a, b) => a.productSum - b.productSum,
        sortOrder: sortedInfo2.columnKey === 'productSum' && sortedInfo2.order,
      },
      {
        title: '机构的产品数量',
        key: 'productNum',
        align: 'right',
        sorter: (a, b) => a.productNum - b.productNum,
        sortOrder: sortedInfo2.columnKey === 'productNum' && sortedInfo2.order,
      },
    ];
    return (
      <div>
        <TableC columns={columns} dataSource={AreaData} rowKey='organ' hidePage={true} onChange={this.handleChange2} loading={loading} />
      </div>
    );
  };

  render() {
    const {
      TransactionMonitoringM: { areaName },
    } = this.props;
    return (
      <div className={style.TableArea}>
        <SecondHeaderC title='各区域数据' />
        <div className='Table_One' style={{ height: '250px', overflow: 'auto' }}>
          {this.showTableAll()}
        </div>
        <div style={{ marginTop: '10px' }}>
          <SecondHeaderC title='选择的区域' />
        </div>
        <div className='Table_Tno' style={{ height: '293px', overflow: 'auto' }}>
          {this.showTable()}
        </div>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM, loading }) => ({
  TransactionMonitoringM,
  loading: loading.effects['TransactionMonitoringM/getTableDate'],
}))(ShowTable);
